<!-- 加班审批流程 -->
<template>
  <div class="approval-process">
    <div class="approval-process-cells">
      <template v-for="(item, idx) in approvers">
        <span v-if="idx > 0" class="item-tag-icon">
          <el-icon><Right /></el-icon>
        </span>
        <ApprovalProcessStepsItem2 v-model="value[idx]" :default-text="item.value" :list-type="item.key" />
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import ApprovalProcessStepsItem2 from '../UserSelf/ApprovalProcessStepsItem2.vue'
import { Right } from '@element-plus/icons-vue'

const props = defineProps({
  userIdentity: {
    type: Number,
    required: true,
  },
  modelValue: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['update:modelValue'])
const value = ref<any[]>(props.modelValue)
// 审批人角色映射表
const approverRoles: any = {
  1: '主管',
  2: '总监',
  3: '制片',
  4: '经理',
  5: '总经理',
}

// 审批人列表配置
const approverConfig: any = {
  // 长春
  101: [1, 3],
  102: [1, 3],
  103: [1, 3],
  104: [1, 3],
  105: [1, 3],
  106: [1, 3],
  107: [1, 3],
  108: [1, 3],
  109: [1, 3],
  111: [5],
  112: [5],

  // 北京
  201: [3, 5],
  202: [3, 5],
  203: [3, 5],
  204: [3, 5],
  205: [3, 4],
  206: [5],
  207: [5],
  208: [5],
  209: [5],
}

// 监听 props.modelValue 的变化，更新 value
watch(
  () => props.modelValue,
  (newVal) => {
    value.value = newVal
  }
)
const approvers = computed(() => {
  return approverConfig[props.userIdentity]?.map((role: number) => {
    return { key: role, value: approverRoles[role] }
  })
})
</script>

<style scoped lang="scss">
.approval-process-cells {
  display: flex;
  flex-wrap: wrap;
  .item-tag-icon {
    margin: 0 10px;
  }
}
</style>
